<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行运盘 - 星格</title>
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
        }

        html, body {
            width: 100%;
            min-height: 100vh;
            overflow-x: hidden;
            font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
            background-color: #0a0e17;
            color: #ffffff;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
        }

        /* 隐藏滚动条但保持滚动功能 */
        ::-webkit-scrollbar {
            display: none;
        }

        body {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* 星星背景容器 */
        .stars {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }

        /* 星星样式 */
        .star {
            position: absolute;
            background-color: #ffffff;
            border-radius: 50%;
            opacity: 0.8;
            animation: twinkle 3s infinite ease-in-out;
            box-shadow: 0 0 5px #ffffff;
        }

        /* 星星闪烁动画 */
        @keyframes twinkle {
            0%, 100% {
                opacity: 0.8;
                transform: scale(1);
            }
            50% {
                opacity: 0.4;
                transform: scale(0.8);
            }
        }

        /* 页面标题 */
        header {
            text-align: center;
            margin-bottom: 30px;
            z-index: 10;
        }

        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            background: linear-gradient(90deg, #a78bfa, #93c5fd, #60a5fa);
            background-size: 200% auto;
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            animation: gradient 3s ease infinite;
            font-weight: bold;
        }

        .subtitle {
            color: #b2bec3;
            font-size: 1.1rem;
            max-width: 600px;
        }

        @keyframes gradient {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        /* 行运盘容器 */
        .chart-container {
            position: relative;
            width: min(80vw, 500px);
            height: min(80vw, 500px);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 行运盘 */
        #transitChart {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            position: relative;
            background: radial-gradient(circle at center, #1a202c, #0a0e17);
            box-shadow: 0 0 30px rgba(99, 102, 241, 0.3), 0 0 50px rgba(99, 102, 241, 0.1);
            overflow: hidden;
        }

        /* 响应式调整 - 保持行运盘容器为正方形 */
        @media (max-width: 768px) {
            .chart-container {
                width: min(90vw, 400px);
            }
        }

        @media (max-width: 480px) {
            .chart-container {
                width: min(95vw, 350px);
            }
        }

        /* 行运盘圆环 */
        .chart-ring {
            position: absolute;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .outer-ring {
            width: 90%;
            height: 90%;
        }

        .middle-ring {
            width: 70%;
            height: 70%;
        }

        .inner-ring {
            width: 50%;
            height: 50%;
        }

        /* 星座扇区 */
        .zodiac-sector {
            position: absolute;
            width: 100%;
            height: 100%;
            transform-origin: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        /* 星座标志 */
        .zodiac-icon {
            position: absolute;
            font-size: 1.5rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
        }

        /* 行星位置 */
        .planet {
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
            z-index: 10;
        }

        .planet-label {
            position: absolute;
            font-size: 1rem;
            color: #ffffff;
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
            pointer-events: none;
        }

        /* 行运盘中心 */
        .chart-center {
            position: absolute;
            width: 30%;
            height: 30%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: radial-gradient(circle at center, #4f46e5, #312e81);
            box-shadow: 0 0 20px rgba(79, 70, 229, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 20;
        }

        .center-text {
            font-size: 1.2rem;
            font-weight: bold;
            text-align: center;
        }

        /* 方向标记 */
        .direction-marker {
            position: absolute;
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.7);
            font-weight: bold;
        }

        .north-marker {
            top: 2%;
            left: 50%;
            transform: translateX(-50%);
            color: #60a5fa;
        }

        .east-marker {
            top: 50%;
            right: 2%;
            transform: translateY(-50%);
            color: #34d399;
        }

        .south-marker {
            bottom: 2%;
            left: 50%;
            transform: translateX(-50%);
            color: #f87171;
        }

        .west-marker {
            top: 50%;
            left: 2%;
            transform: translateY(-50%);
            color: #facc15;
        }

        /* 日期选择器 */
        .date-selector {
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .date-label {
            font-size: 1.1rem;
            font-weight: 500;
        }

        #transitDate {
            padding: 8px 12px;
            background-color: rgba(30, 41, 59, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 6px;
            color: #ffffff;
            font-size: 1rem;
            cursor: pointer;
        }

        #transitDate:focus {
            outline: none;
            border-color: #60a5fa;
            box-shadow: 0 0 10px rgba(96, 165, 250, 0.3);
        }

        /* 控制按钮组 */
        .control-buttons {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-bottom: 30px;
        }

        .control-btn {
            padding: 10px 20px;
            background-color: rgba(30, 41, 59, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 25px;
            color: #ffffff;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .control-btn:hover {
            background-color: rgba(59, 130, 246, 0.3);
            border-color: #60a5fa;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(96, 165, 250, 0.3);
        }

        .control-btn.selected {
            background-color: rgba(59, 130, 246, 0.5);
            border-color: #60a5fa;
            box-shadow: 0 4px 15px rgba(96, 165, 250, 0.4);
        }

        /* 信息面板 */
        .info-panel {
            width: min(90vw, 600px);
            padding: 20px;
            background-color: rgba(15, 23, 42, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            margin-bottom: 50px;
            backdrop-filter: blur(10px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            transition: all 0.3s ease;
        }

        .info-panel:hover {
            border-color: rgba(96, 165, 250, 0.5);
            box-shadow: 0 10px 30px rgba(96, 165, 250, 0.2);
        }

        .info-title {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: #60a5fa;
            text-align: center;
        }

        .info-content {
            font-size: 1rem;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.9);
        }

        .info-content p {
            margin-bottom: 10px;
        }

        .info-content p:last-child {
            margin-bottom: 0;
        }

        /* 响应式布局 */
        @media (max-width: 768px) {
            .title {
                font-size: 2rem;
                margin: 20px 0 15px;
            }

            .chart-container {
                width: min(90vw, 400px);
                height: min(90vw, 400px);
            }

            .control-buttons {
                gap: 8px;
            }

            .control-btn {
                padding: 8px 16px;
                font-size: 0.9rem;
            }

            .info-panel {
                padding: 15px;
                margin-bottom: 30px;
            }

            .info-title {
                font-size: 1.3rem;
            }

            .info-content {
                font-size: 0.9rem;
            }
        }

        @media (max-width: 480px) {
            .title {
                font-size: 1.8rem;
                margin: 15px 0 10px;
            }

            .chart-container {
                width: min(95vw, 350px);
                height: min(95vw, 350px);
            }

            .zodiac-icon {
                font-size: 1.2rem;
            }

            .planet {
                width: 10px;
                height: 10px;
            }

            .planet-label {
                font-size: 0.8rem;
            }

            .center-text {
                font-size: 1rem;
            }

            .date-selector {
                flex-direction: column;
                gap: 5px;
            }

            .control-buttons {
                flex-direction: column;
                align-items: center;
            }

            .control-btn {
                width: 200px;
            }
        }
    </style>
</head>
<body>
    <!-- 星星背景 -->
    <div class="stars"></div>

    <!-- 标题 -->
    <h1 class="title">行运盘</h1>

    <!-- 日期选择器 -->
    <div class="date-selector">
        <span class="date-label">选择日期：</span>
        <input type="date" id="transitDate">
    </div>

    <!-- 行运盘容器 -->
    <div class="chart-container">
        <div id="transitChart">
            <!-- 圆环 -->
            <div class="chart-ring outer-ring"></div>
            <div class="chart-ring middle-ring"></div>
            <div class="chart-ring inner-ring"></div>

            <!-- 方向标记 -->
            <div class="direction-marker north-marker">北</div>
            <div class="direction-marker east-marker">东</div>
            <div class="direction-marker south-marker">南</div>
            <div class="direction-marker west-marker">西</div>

            <!-- 行运盘中心 -->
            <div class="chart-center">
                <div class="center-text">星格
行运</div>
            </div>

            <!-- 星座扇区和行星将通过JavaScript动态生成 -->
        </div>
    </div>

    <!-- 控制按钮组 -->
    <div class="control-buttons">
        <button class="control-btn selected" id="todayBtn">今日</button>
        <button class="control-btn" id="sunTransitBtn">太阳行运</button>
        <button class="control-btn" id="moonTransitBtn">月亮行运</button>
        <button class="control-btn" id="resetBtn">重置</button>
    </div>

    <!-- 信息面板 -->
    <div class="info-panel">
        <h2 class="info-title" id="infoTitle">行运解析</h2>
        <div class="info-content" id="infoContent">
            <p>选择日期或点击行星以查看详细的行运解析。行运盘展示了当前天体位置与您出生时天体位置的相互作用，揭示当下的能量影响和潜在趋势。</p>
        </div>
    </div>

    <script>
        // 星座数据
        const zodiacSigns = [
            { name: '白羊座', startDegree: 0, endDegree: 30, color: '#f87171', element: '火象', symbol: '♈' },
            { name: '金牛座', startDegree: 30, endDegree: 60, color: '#34d399', element: '土象', symbol: '♉' },
            { name: '双子座', startDegree: 60, endDegree: 90, color: '#facc15', element: '风象', symbol: '♊' },
            { name: '巨蟹座', startDegree: 90, endDegree: 120, color: '#f87171', element: '水象', symbol: '♋' },
            { name: '狮子座', startDegree: 120, endDegree: 150, color: '#facc15', element: '火象', symbol: '♌' },
            { name: '处女座', startDegree: 150, endDegree: 180, color: '#34d399', element: '土象', symbol: '♍' },
            { name: '天秤座', startDegree: 180, endDegree: 210, color: '#93c5fd', element: '风象', symbol: '♎' },
            { name: '天蝎座', startDegree: 210, endDegree: 240, color: '#a78bfa', element: '水象', symbol: '♏' },
            { name: '射手座', startDegree: 240, endDegree: 270, color: '#facc15', element: '火象', symbol: '♐' },
            { name: '摩羯座', startDegree: 270, endDegree: 300, color: '#34d399', element: '土象', symbol: '♑' },
            { name: '水瓶座', startDegree: 300, endDegree: 330, color: '#93c5fd', element: '风象', symbol: '♒' },
            { name: '双鱼座', startDegree: 330, endDegree: 360, color: '#a78bfa', element: '水象', symbol: '♓' }
        ];

        // 行星数据
        const planets = [
            { name: '太阳', symbol: '☉', color: '#facc15', currentDegree: 23, retrograde: false },
            { name: '月亮', symbol: '☽', color: '#e5e7eb', currentDegree: 124, retrograde: false },
            { name: '水星', symbol: '☿', color: '#9ca3af', currentDegree: 18, retrograde: true },
            { name: '金星', symbol: '♀', color: '#f472b6', currentDegree: 350, retrograde: false },
            { name: '火星', symbol: '♂', color: '#ef4444', currentDegree: 87, retrograde: false },
            { name: '木星', symbol: '♃', color: '#34d399', currentDegree: 156, retrograde: false },
            { name: '土星', symbol: '♄', color: '#cbd5e1', currentDegree: 220, retrograde: true },
            { name: '天王星', symbol: '♅', color: '#93c5fd', currentDegree: 290, retrograde: false },
            { name: '海王星', symbol: '♆', color: '#a78bfa', currentDegree: 260, retrograde: false },
            { name: '冥王星', symbol: '♇', color: '#fb923c', currentDegree: 230, retrograde: true }
        ];

        // 行运解析数据
        const transitInterpretations = {
            today: "今日行运显示太阳位于白羊座23度，月亮位于巨蟹座4度。这一天可能会激发您的创造力和情感表达能力。水星逆行提醒您注意沟通和计划的灵活性。",
            sun: "太阳行运展示了自我表达和生命力的流动。当前太阳位于白羊座，增强了您的领导能力和开创精神。白羊座的太阳鼓励您采取行动并追求个人目标。",
            moon: "月亮行运反映了情绪和内在需求的变化。当前月亮位于巨蟹座，增强了您的家庭意识和情感敏感度。这是一个关注内心感受和家庭关系的好时机。",
            mercury: "水星在行运中代表思维和沟通模式。目前水星在白羊座逆行，这可能导致沟通延迟或误解，建议您在重要交流前仔细思考。",
            venus: "金星行运影响人际关系和价值观。当前金星位于双鱼座，增强了您的同理心和艺术鉴赏力。这是一个培养和谐关系和享受美好事物的时期。",
            mars: "火星行运代表行动和欲望的驱动力。当前火星位于双子座，激发了您的好奇心和适应能力。您可能会感到更有动力探索新想法和与人交流。",
            jupiter: "木星行运带来扩张和机遇。当前木星位于狮子座，增强了您的自信心和创造力。这是一个追求个人成长和表达自我的有利时期。",
            saturn: "土星行运代表责任和结构。当前土星在水瓶座逆行，提醒您审视长期目标和社会责任。这是一个重新评估和巩固基础的时期。",
            uranus: "天王星行运带来变革和创新。当前天王星位于金牛座，可能触发对稳定和安全感的重新定义。您可能会感到需要打破常规，寻求新的生活方式。",
            neptune: "海王星行运影响直觉和想象力。当前海王星位于双鱼座，增强了您的直觉力和精神感知。这是一个连接内在智慧和探索精神世界的好时机。",
            pluto: "冥王星行运代表转化和重生。当前冥王星在摩羯座逆行，可能引发对权力结构和个人影响力的深刻反思。这是一个释放旧模式、拥抱新开始的时期。"
        };

        // 生成星座扇区
        function createZodiacSectors() {
            const chart = document.getElementById('transitChart');
            const sectorAngle = 360 / zodiacSigns.length;

            zodiacSigns.forEach((sign, index) => {
                const sector = document.createElement('div');
                sector.className = 'zodiac-sector';
                sector.style.transform = `rotate(${sign.startDegree}deg)`;
                sector.dataset.sign = sign.name;

                // 创建扇区的剪切路径
                const clipPath = `polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%)`;
                sector.style.clipPath = clipPath;

                // 添加点击事件
                sector.addEventListener('click', () => {
                    updateInfoPanel(sign);
                    highlightSign(sign.name);
                });

                chart.appendChild(sector);

                // 创建星座标志
                createZodiacIcon(sign, index);
            });
        }

        // 创建星座标志
        function createZodiacIcon(sign, index) {
            const chart = document.getElementById('transitChart');
            const icon = document.createElement('div');
            icon.className = 'zodiac-icon';
            icon.textContent = sign.symbol;
            icon.style.color = sign.color;
            icon.dataset.sign = sign.name;

            // 计算标志位置（在外环）
            const angle = (sign.startDegree + sign.endDegree) / 2;
            const radians = (angle - 90) * Math.PI / 180;
            const radius = 45; // 百分比
            const x = 50 + radius * Math.cos(radians);
            const y = 50 + radius * Math.sin(radians);

            icon.style.left = `${x}%`;
            icon.style.top = `${y}%`;
            icon.style.transform = `translate(-50%, -50%) rotate(${90 - angle}deg)`;

            // 添加点击事件
            icon.addEventListener('click', () => {
                updateInfoPanel(sign);
                highlightSign(sign.name);
            });

            chart.appendChild(icon);
        }

        // 生成行星位置
        function createPlanets(dynamicPlanets = null) {
            const chart = document.getElementById('transitChart');
            // 使用传入的动态行星数据，如果没有则使用静态行星数据
            const planetsToDisplay = dynamicPlanets || planets;

            planetsToDisplay.forEach(planet => {
                // 确保行星对象有所有必要的属性
                const planetData = {
                    ...planet,
                    currentDegree: planet.angle || planet.currentDegree || 0,
                    retrograde: planet.retrograde || false
                };
                
                // 计算行星位置（在中环）
                const angle = planetData.currentDegree;
                const radians = (angle - 90) * Math.PI / 180;
                const radius = 30; // 百分比
                const x = 50 + radius * Math.cos(radians);
                const y = 50 + radius * Math.sin(radians);

                // 创建行星
                const planetElement = document.createElement('div');
                planetElement.className = 'planet';
                planetElement.style.backgroundColor = planetData.color;
                planetElement.style.left = `${x}%`;
                planetElement.style.top = `${y}%`;
                planetElement.style.transform = 'translate(-50%, -50%)';
                planetElement.title = `${planetData.name} ${planetData.retrograde ? '(逆行)' : ''}`;
                planetElement.dataset.planet = planetData.name;

                // 添加逆行标记
                if (planetData.retrograde) {
                    const retrogradeMark = document.createElement('div');
                    retrogradeMark.style.position = 'absolute';
                    retrogradeMark.style.width = '6px';
                    retrogradeMark.style.height = '2px';
                    retrogradeMark.style.backgroundColor = '#ffffff';
                    retrogradeMark.style.top = '100%';
                    retrogradeMark.style.left = '50%';
                    retrogradeMark.style.transform = 'translateX(-50%)';
                    planetElement.appendChild(retrogradeMark);
                }

                // 添加行星标签
                const label = document.createElement('div');
                label.className = 'planet-label';
                label.textContent = planetData.symbol;
                label.style.left = `${x}%`;
                label.style.top = `${y}%`;
                label.style.transform = 'translate(calc(-50% + 12px), -50%)';

                // 添加点击事件
                planetElement.addEventListener('click', () => {
                    // 从原始planets数组中找到完整的行星数据
                    const fullPlanetData = planets.find(p => p.name === planetData.name) || planetData;
                    updatePlanetInfo(fullPlanetData);
                    highlightPlanet(planetData.name);
                });

                chart.appendChild(planetElement);
                chart.appendChild(label);
            });
        }

        // 更新信息面板
        function updateInfoPanel(sign) {
            const infoTitle = document.getElementById('infoTitle');
            const infoContent = document.getElementById('infoContent');

            infoTitle.textContent = `${sign.name} (${sign.element})`;
            infoContent.innerHTML = `
                <p><strong>符号：</strong>${sign.symbol}</p>
                <p><strong>元素：</strong>${sign.element}</p>
                <p><strong>度数范围：</strong>${sign.startDegree}° - ${sign.endDegree}°</p>
                <p>${getZodiacInterpretation(sign.name)}</p>
            `;
        }

        // 更新行星信息
        function updatePlanetInfo(planet) {
            const infoTitle = document.getElementById('infoTitle');
            const infoContent = document.getElementById('infoContent');

            infoTitle.textContent = `${planet.name} ${planet.retrograde ? '(逆行)' : ''}`;
            infoContent.innerHTML = `
                <p><strong>符号：</strong>${planet.symbol}</p>
                <p><strong>当前位置：</strong>${getZodiacAtDegree(planet.currentDegree)}</p>
                <p><strong>度数：</strong>${planet.currentDegree}°</p>
                <p><strong>状态：</strong>${planet.retrograde ? '逆行' : '顺行'}</p>
                <p>${transitInterpretations[planet.name.toLowerCase()] || '暂无详细解析信息。'}</p>
            `;
        }

        // 根据度数获取星座
        function getZodiacAtDegree(degree) {
            for (let sign of zodiacSigns) {
                if (degree >= sign.startDegree && degree < sign.endDegree) {
                    const withinSignDegree = degree - sign.startDegree;
                    return `${sign.name} ${withinSignDegree.toFixed(1)}°`;
                }
            }
            // 如果度数为360°，返回双鱼座
            return `${zodiacSigns[zodiacSigns.length - 1].name} 30.0°`;
        }

        // 获取星座解析
        function getZodiacInterpretation(signName) {
            const interpretations = {
                '白羊座': '白羊座是黄道第一宫，代表新生和开始。行运中的白羊座能量会激发您的勇气和开创精神，鼓励您采取行动并追求个人目标。',
                '金牛座': '金牛座是黄道第二宫，代表价值和稳定。行运中的金牛座能量会增强您的耐心和实际感，帮助您建立稳固的基础和享受生活的美好。',
                '双子座': '双子座是黄道第三宫，代表沟通和思维。行运中的双子座能量会激发您的好奇心和适应能力，促进学习和信息交流。',
                '巨蟹座': '巨蟹座是黄道第四宫，代表家庭和情感。行运中的巨蟹座能量会增强您的同理心和保护欲，使您更加关注家庭和内在感受。',
                '狮子座': '狮子座是黄道第五宫，代表自我表达和创造力。行运中的狮子座能量会提升您的自信心和领导力，鼓励您展现独特的才华。',
                '处女座': '处女座是黄道第六宫，代表服务和细节。行运中的处女座能量会增强您的分析能力和组织能力，帮助您完善计划和提高效率。',
                '天秤座': '天秤座是黄道第七宫，代表关系和平衡。行运中的天秤座能量会促进和谐的人际关系，帮助您找到生活中的平衡点。',
                '天蝎座': '天蝎座是黄道第八宫，代表转化和深度。行运中的天蝎座能量会激发您的洞察力和意志力，促进内在的成长和转变。',
                '射手座': '射手座是黄道第九宫，代表探索和哲学。行运中的射手座能量会增强您的乐观精神和冒险精神，鼓励您追求知识和拓宽视野。',
                '摩羯座': '摩羯座是黄道第十宫，代表成就和责任。行运中的摩羯座能量会提升您的专注力和毅力，帮助您实现长期目标。',
                '水瓶座': '水瓶座是黄道第十一宫，代表创新和社群。行运中的水瓶座能量会激发您的独立思考和社会意识，促进变革和进步。',
                '双鱼座': '双鱼座是黄道第十二宫，代表直觉和超越。行运中的双鱼座能量会增强您的同理心和想象力，帮助您连接内在的智慧和精神世界。'
            };
            return interpretations[signName] || '暂无详细解析信息。';
        }

        // 高亮选中的星座
        function highlightSign(signName) {
            // 移除所有选中状态
            document.querySelectorAll('.zodiac-sector, .zodiac-icon').forEach(element => {
                element.style.opacity = '1';
                element.style.transform = element.style.transform.replace(' scale(1.1)', '');
            });

            // 高亮选中的星座
            document.querySelectorAll(`.zodiac-sector[data-sign="${signName}"], .zodiac-icon[data-sign="${signName}"]`).forEach(element => {
                if (element.classList.contains('zodiac-icon')) {
                    element.style.transform += ' scale(1.1)';
                    element.style.textShadow = '0 0 10px rgba(255, 255, 255, 0.8)';
                }
            });
        }

        // 高亮选中的行星
        function highlightPlanet(planetName) {
            // 移除所有选中状态
            document.querySelectorAll('.planet').forEach(planet => {
                planet.style.transform = 'translate(-50%, -50%)';
                planet.style.boxShadow = '0 0 10px rgba(255, 255, 255, 0.8)';
            });

            // 高亮选中的行星
            document.querySelector(`.planet[data-planet="${planetName}"]`).style.boxShadow = '0 0 20px rgba(255, 255, 255, 0.9), 0 0 30px rgba(59, 130, 246, 0.8)';
        }

        // 移除所有选中状态
        function removeAllSelectedStates() {
            document.querySelectorAll('.control-btn').forEach(btn => {
                btn.classList.remove('selected');
            });

            document.querySelectorAll('.zodiac-sector, .zodiac-icon').forEach(element => {
                element.style.opacity = '1';
                element.style.transform = element.style.transform.replace(' scale(1.1)', '');
                if (element.classList.contains('zodiac-icon')) {
                    element.style.textShadow = '0 0 5px rgba(255, 255, 255, 0.8)';
                }
            });

            document.querySelectorAll('.planet').forEach(planet => {
                planet.style.transform = 'translate(-50%, -50%)';
                planet.style.boxShadow = '0 0 10px rgba(255, 255, 255, 0.8)';
            });
        }

        // 设置今天的日期
        function setTodayDate() {
            const today = new Date();
            const year = today.getFullYear();
            const month = String(today.getMonth() + 1).padStart(2, '0');
            const day = String(today.getDate()).padStart(2, '0');
            const formattedDate = `${year}-${month}-${day}`;
            document.getElementById('transitDate').value = formattedDate;
        }

        // 生成星星背景
        function createStars() {
            const starsContainer = document.querySelector('.stars');
            const starCount = 150;

            for (let i = 0; i < starCount; i++) {
                const star = document.createElement('div');
                star.className = 'star';

                // 随机位置
                const x = Math.random() * 100;
                const y = Math.random() * 100;

                // 随机大小
                const size = Math.random() * 2 + 1;

                // 随机闪烁延迟
                const delay = Math.random() * 3;

                star.style.left = `${x}%`;
                star.style.top = `${y}%`;
                star.style.width = `${size}px`;
                star.style.height = `${size}px`;
                star.style.animationDelay = `${delay}s`;

                starsContainer.appendChild(star);
            }
        }

        // 优化滑动体验的函数
        function optimizeScrolling() {
            // 1. 通过CSS设置触摸行为，允许垂直滑动
            document.body.style.touchAction = 'pan-y';
            document.body.style.overscrollBehavior = 'contain';
            
            // 1.1 确保星星背景不会覆盖内容
            const starsBackground = document.querySelector('.stars');
            if (starsBackground) {
                starsBackground.style.zIndex = '-1';
            }

            // 2. 定义变量用于触摸控制
            let startX = null;
            let startY = null;
            let isVerticalScrolling = false;
            const HORIZONTAL_THRESHOLD = 10; // 放宽水平滑动检测阈值
            const VERTICAL_MIN_DISTANCE = 5; // 垂直滑动最小距离

            // 触摸开始事件
            document.addEventListener('touchstart', (e) => {
                startX = e.touches[0].clientX;
                startY = e.touches[0].clientY;
                isVerticalScrolling = false;
            }, { passive: true });

            // 触摸移动事件 - 优化版，优先保证垂直滑动体验
            document.addEventListener('touchmove', (e) => {
                if (!startX || !startY) return;

                // 计算滑动距离
                const touchX = e.touches[0].clientX;
                const touchY = e.touches[0].clientY;
                const diffX = Math.abs(touchX - startX);
                const diffY = Math.abs(touchY - startY);

                // 确定是否为垂直滚动
                if (!isVerticalScrolling && diffY > VERTICAL_MIN_DISTANCE) {
                    isVerticalScrolling = true;
                }

                // 只有当明显是水平滑动时才阻止
                if (!isVerticalScrolling && diffX > HORIZONTAL_THRESHOLD && diffX > diffY) {
                    e.preventDefault();
                }
                // 如果已经确定为垂直滚动，则允许继续滚动
                // 这里不使用passive: false可以提高性能
            }, { passive: true });

            // 3. 手势处理 - 只在必要时阻止
            document.addEventListener('gesturestart', (e) => {
                e.preventDefault();
            }, { passive: false });

            // 4. 优化水平位置控制 - 减少过度干预
            let lastScrollTime = 0;
            const SCROLL_DELAY = 50; // 滚动事件防抖延迟

            window.addEventListener('scroll', () => {
                const now = Date.now();
                // 防抖处理，避免过于频繁地干预滚动
                if (now - lastScrollTime > SCROLL_DELAY && window.scrollX !== 0) {
                    lastScrollTime = now;
                    window.scrollTo(0, window.scrollY);
                }
            }, { passive: true });

            // 5. 确保body可以自由扩展高度
            document.body.style.minHeight = '100vh';
            document.documentElement.style.minHeight = '100vh';
            document.body.style.overflowY = 'auto';
            document.documentElement.style.overflowY = 'auto';
            
            // 5.1 在移动设备上添加额外的底部空间，确保内容不被遮挡
            const addMobileBottomSpace = () => {
                if (window.innerWidth <= 768) {
                    document.body.style.paddingBottom = '100px'; // 增加底部padding，确保内容不被遮挡
                } else {
                    document.body.style.paddingBottom = '0';
                }
            };
            
            // 初始调用一次
            addMobileBottomSpace();
            
            // 监听窗口大小变化
            window.addEventListener('resize', addMobileBottomSpace);

            // 6. 为信息面板添加额外的滚动保障
            const infoContent = document.querySelector('.info-content');
            if (infoContent) {
                infoContent.style.zIndex = '10';
                infoContent.style.position = 'relative';
                infoContent.style.overflowY = 'auto';
                // 确保信息面板在移动设备上有足够的空间显示
                if (window.innerWidth <= 768) {
                    infoContent.style.marginBottom = '50px';
                }
            }
        }

        // 初始化
        function init() {
            createStars();
            createZodiacSectors();
            createPlanets();
            setTodayDate();
            optimizeScrolling();
            
            // 如果是在iframe中加载，添加in-iframe类并特殊处理
            if (window.self !== window.top) {
                document.body.classList.add('in-iframe');
                // 在iframe中特别优化滚动体验
                document.body.style.height = 'auto';
                document.body.style.overflowY = 'auto';
                document.documentElement.style.height = 'auto';
                document.documentElement.style.overflowY = 'auto';
            }
            
            // 延迟初始化默认信息，确保DOM完全加载
            setTimeout(() => {
                updateInfoPanel(zodiacSigns[0]);
            }, 300);

            // 根据日期计算行星位置的函数
            function calculatePlanetPositions(date) {
                // 获取基础位置并保留所有必要属性
                const basePositions = planets.map(planet => ({
                    ...planet,
                    currentDegree: planet.currentDegree // 保留原始属性名
                }));
                
                // 根据日期计算偏移量（实际应用中这里应该使用天文计算库）
                const dateObj = new Date(date);
                const today = new Date();
                const diffTime = Math.abs(dateObj - today);
                const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
                
                // 为每个行星添加不同的偏移量以模拟真实运动
                basePositions.forEach(planet => {
                    // 不同行星有不同的运行速度
                    let speedFactor = 1;
                    if (planet.name === '水星') speedFactor = 4;
                    else if (planet.name === '金星') speedFactor = 1.6;
                    else if (planet.name === '火星') speedFactor = 0.5;
                    else if (planet.name === '木星') speedFactor = 0.11;
                    else if (planet.name === '土星') speedFactor = 0.03;
                    else if (planet.name === '天王星') speedFactor = 0.01;
                    else if (planet.name === '海王星') speedFactor = 0.005;
                    else if (planet.name === '冥王星') speedFactor = 0.003;
                    else if (planet.name === '月亮') speedFactor = 13;
                    
                    // 计算每天的度数变化
                    const dailyChange = 360 / 365 * speedFactor;
                    // 根据日期与今天的差异计算总变化
                    let totalChange = dailyChange * diffDays;
                    
                    // 如果选择的是过去的日期，需要减去变化
                    if (dateObj < today) {
                        totalChange = -totalChange;
                    }
                    
                    // 更新行星位置
                    planet.currentDegree = (planet.currentDegree + totalChange) % 360;
                    // 确保度数为正数
                    if (planet.currentDegree < 0) {
                        planet.currentDegree += 360;
                    }
                });
                
                return basePositions;
            }
            
            // 更新行运盘的函数
            function updateTransitChart(date, focusType = null) {
                // 清除旧的行星元素
                const chartContainer = document.querySelector('.chart-container');
                document.querySelectorAll('.planet, .planet-label, .retrograde').forEach(el => el.remove());
                
                // 计算新的行星位置
                const planetPositions = calculatePlanetPositions(date);
                
                // 根据焦点类型调整显示
                if (focusType === 'sun') {
                    // 太阳行运模式
                    planetPositions.forEach(planet => {
                        if (planet.name === '太阳') {
                            // 太阳保持在中心位置
                            planet.currentDegree = 0;
                        }
                    });
                } else if (focusType === 'moon') {
                    // 月亮行运模式
                    planetPositions.forEach(planet => {
                        if (planet.name === '月亮') {
                            // 月亮保持在中心位置
                            planet.currentDegree = 0;
                        }
                    });
                }
                
                // 重新创建行星
                createPlanets(planetPositions);
                
                // 添加行星逆行标记
                addRetrogradeMarkers();
                
                // 创建行星标签
                createPlanetLabels();
            }
            
            // 为按钮添加事件监听
            document.getElementById('todayBtn').addEventListener('click', () => {
                removeAllSelectedStates();
                event.currentTarget.classList.add('selected');
                setTodayDate();
                updateInfoPanel(zodiacSigns[0]);
                // 更新行运盘
                const todayDate = document.getElementById('transitDate').value;
                updateTransitChart(todayDate);
            });

            document.getElementById('sunTransitBtn').addEventListener('click', () => {
                removeAllSelectedStates();
                event.currentTarget.classList.add('selected');
                const sun = planets.find(p => p.name === '太阳');
                if (sun) updatePlanetInfo(sun);
                // 更新行运盘为太阳中心模式
                const currentDate = document.getElementById('transitDate').value;
                updateTransitChart(currentDate, 'sun');
            });

            document.getElementById('moonTransitBtn').addEventListener('click', () => {
                removeAllSelectedStates();
                event.currentTarget.classList.add('selected');
                const moon = planets.find(p => p.name === '月亮');
                if (moon) updatePlanetInfo(moon);
                // 更新行运盘为月亮中心模式
                const currentDate = document.getElementById('transitDate').value;
                updateTransitChart(currentDate, 'moon');
            });

            document.getElementById('resetBtn').addEventListener('click', () => {
                removeAllSelectedStates();
                event.currentTarget.classList.add('selected');
                setTodayDate();
                updateInfoPanel(zodiacSigns[0]);
                // 重置行运盘
                const todayDate = document.getElementById('transitDate').value;
                updateTransitChart(todayDate);
            });

            // 日期选择器变化事件
            document.getElementById('transitDate').addEventListener('change', () => {
                removeAllSelectedStates();
                // 根据选择的日期更新行运盘
                const selectedDate = document.getElementById('transitDate').value;
                updateTransitChart(selectedDate);
                updateInfoPanel(zodiacSigns[0]);
            });
        }

        // 页面加载完成后初始化
        window.addEventListener('load', init);
    </script>
</body>
</html>